<template>
  <el-dialog :visible.sync="dialogVisible" title="新增客户档案" width="800px" :close-on-click-modal="false" v-drag2anywhere>
    <div style="overflow: auto; padding: 5px;">
      <el-form ref="form" :model="formData" :rules="rules" label-width="100px" size="mini">
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="企业名称:"  prop="title">
              <el-input v-model="formData.title" placeholder="企业名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纳税号码:"   prop="taxcode">
              <el-input v-model="formData.taxcode" placeholder="纳税号码" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册地址:"   prop="address">
              <el-input v-model="formData.address" placeholder="注册地址" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册电话:"   prop="mobile">
              <el-input v-model="formData.mobile" placeholder="联系电话" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行名称:"  prop="bankname">
              <el-input v-model="formData.bankname" placeholder="开户行名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行账号:"   prop="bankid">
              <el-input v-model="formData.bankid" placeholder="银行账号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="区域:" prop="region_ids">
              <el-cascader ref="cityregion"
                  expand-trigger="hover"
                  :options="regionList"
                  v-model="formData.region_ids" :props="{value:'region_id',label:'region_name'}"
                  @change="handleRegionChange" style="width: 100%;">
                </el-cascader>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="所属账套" prop="accountid">
              <el-select v-model="formData.accountid" style="width: 100%;" @change="handleAccountChanged">
                <el-option v-for="(item,index) in accounts" :label="item.name" :value="item.id" :key="item.id" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" size="medium" @click="handleSave">保  存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        formData: {
          title: "",
          taxcode:'',
          address:'',
          mobile:'',
          bankname: '',
          bankid: '',
          accountid:'',
          account:'',
          region_values:[],
          region_ids:[],
        },
        accounts:[],
        regionList:[],
        dialogVisible: true,
        rules: {
          accountid: [{
            required: true,
            "message": "请选择客户所属账套",
            trigger: blur
          }],
          title: [{
            required: true,
            "message": "客户抬头不能为空",
            trigger: blur
          }],
          region_ids: [{
            type:'array',
            required: true,
            "message": "客户所属行政区域不能为空!",
            trigger: 'change'
          }]
        }
      }
    },
    mounted() {
        this.loadRegions();

    },
    methods: {
      initData(){

        this.formData={
          title: "",
          address:'',
          taxcode:'',
          bankname: '',
          bankid: '',
          accountid:localStorage.getItem("accountid"),
          account:localStorage.getItem("account"),
          region_values:[],
          region_ids:[]
        };
        this.loadSuppliers();
      },
      handleAccountChanged(accountid){
        var option = this.accounts.filter(function(cur, index, a) {
          if (cur.id == accountid) {
            return cur;
          }
        })[0];
        this.formData.accountid=option.id;
        this.formData.account=option.name;
      },
      loadSuppliers(){
        this.axios.post("api/admin/account/list_item").then(res=>{
          if(res.status==200 && res.data.code==0){
            this.accounts=res.data.list;
          }
        })
      },
      loadRegions(){
        this.axios.post("api/common/region/list").then(res=>{
          if(res.status==200 && res.data.code==0){
            this.regionList=res.data.data;
          }
        })
      },
      handleRegionChange:function(reg){
        this.formData.region_ids=reg;
        this.formData.region_values=this.$refs["cityregion"].getCheckedNodes()[0].pathLabels;
      },
      handleSave: function() {
        this.$refs.form.validate((ok) => {
          if (ok) {
            let params = {
              title: this.formData.title,
              taxcode:this.formData.taxcode,
              bankname: this.formData.bankname,
              bankid: this.formData.bankid,
              mobile:this.formData.mobile,
              accountid:this.formData.accountid,
              account:this.formData.account,
              region_ids: this.formData.region_ids,
              region_values:this.formData.region_values,
              address:this.formData.address,
            };

            this.axios.post("api/admin/client/add", params).then((res) => {
              if (res.status == 200 && res.data.code == 0) {
                this.$message.success(res.data.msg);
                this.dialogVisible = false;
                this.$emit("closeHandler");
              } else {
                this.$alert(res.data.msg, "提示", {
                  type: 'error'
                });
              }
              console.log(res);
            })

            return true;
          }
          return false;
        })
      }
    }
  }
</script>

<style scoped>

</style>
